<template>
    <div id="edit-warp" class="w-full">
        <div id="contentVditor" class="md-editor"></div>
    </div>
</template>
<script setup lang="ts">
    import Vditor from 'vditor'
    import "vditor/dist/index.css"
    import { getNotes, updateNotes } from '@/api/notes'
    import { getServerUrl } from '@/utils/commons'
    import { getToken } from '@/utils/auth'
    import { NotesForm, NotesVO } from '@/api/notes/types'
    import { useRoute } from 'vue-router'
    import useEditorStore from '@/stores/modules/editor'
    import { ElLoading } from 'element-plus'
    import { getEditorWinHeight } from '@/utils/commons';

    const route = useRoute()
    const editorStore = useEditorStore();

    const loading = ref()
    const contentEditor = ref<Vditor>(null)
    const mdEditorForm = ref<NotesForm>();

    const saveSvg = '<svg t="1730727447491" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22467" width="256" height="256"><path d="M511.99992 511.99992m-511.99992 0a511.99992 511.99992 0 1 0 1023.99984 0 511.99992 511.99992 0 1 0-1023.99984 0Z" fill="#E16B5A" p-id="22468"></path><path d="M963.647849 753.223882c-0.584-1.648-1.296-3.239999-1.967999-4.855999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.271999-1.984-4.903999-0.584-1.68-1.312-3.295999-1.991999-4.936-0.576-1.656-1.304-3.255999-1.976-4.879999-0.584-1.672-1.304-3.279999-1.976-4.911999-0.592-1.672-1.312-3.271999-1.983999-4.903999-0.592-1.68-1.312-3.295999-2-4.936-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.279999-1.983999-4.911999-0.592-1.696-1.328-3.327999-2.016-4.983999-0.576-1.64-1.296-3.223999-1.968-4.831999-0.576-1.68-1.312-3.295999-1.984-4.936-0.584-1.656-1.312-3.255999-1.983999-4.871999-0.576-1.672-1.296-3.279999-1.984-4.911999-0.576-1.672-1.296-3.279999-1.984-4.911999-0.576-1.68-1.304-3.295999-1.983999-4.936-0.584-1.656-1.304-3.255999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.911999-0.584-1.68-1.312-3.295999-1.992-4.936-0.584-1.656-1.304-3.247999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.983999-4.911999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.984-4.912-0.584-1.68-1.312-3.287999-1.992-4.927999-0.576-1.656-1.296-3.255999-1.975999-4.879999-0.584-1.672-1.304-3.279999-1.976-4.911999-0.592-1.672-1.312-3.279999-1.984-4.903999-0.592-1.68-1.312-3.295999-1.999999-4.936-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.592-1.672-1.312-3.271999-1.983999-4.903999-0.584-1.68-1.312-3.295999-2-4.936-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.696-1.328-3.335999-2.015999-4.991999-0.576-1.64-1.296-3.223999-1.968-4.831999-0.576-1.672-1.296-3.279999-1.984-4.912-0.576-1.68-1.304-3.295999-1.983999-4.935999-0.584-1.656-1.304-3.255999-1.976-4.871999-0.584-1.68-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.68-1.312-3.295999-1.991999-4.936-0.584-1.656-1.304-3.255999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.911999-0.584-1.68-1.312-3.295999-1.992-4.936-0.576-1.656-1.304-3.255999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.975999-4.911999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.592-1.672-1.312-3.279999-1.984-4.912-0.592-1.68-1.312-3.287999-1.999999-4.927999-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.584-1.672-1.312-3.279999-1.984-4.912-0.584-1.68-1.312-3.287999-1.999999-4.927999-0.576-1.656-1.296-3.255999-1.968-4.879999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.903999-0.584-1.688-1.312-3.295999-1.992-4.936-0.592-1.68-1.32-3.311999-2.008-4.959999-0.576-1.64-1.296-3.223999-1.959999-4.831999-0.584-1.672-1.304-3.279999-1.984-4.903999-0.584-1.672-1.304-3.279999-1.984-4.912-0.584-1.68-1.312-3.295999-1.991999-4.935999-0.584-1.656-1.304-3.255999-1.976-4.879999-0.584-1.672-1.304-3.271999-1.984-4.903999-0.584-1.672-1.304-3.279999-1.983999-4.912-0.584-1.68-1.312-3.295999-1.992-4.935999-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.271999-1.984-4.903999-0.592-1.672-1.312-3.279999-1.983999-4.911999-0.592-1.68-1.312-3.295999-2-4.936-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.271999-1.983999-4.903999-0.584-1.672-1.312-3.279999-1.984-4.911999-0.584-1.672-1.312-3.279999-1.984-4.912-0.584-1.68-1.312-3.295999-1.999999-4.935999-0.576-1.656-1.296-3.247999-1.968-4.871999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.912-0.584-1.68-1.312-3.295999-1.992-4.935999-0.584-1.648-1.304-3.247999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.912a98.863985 98.863985 0 0 0-3.376-8.343998c-0.184-0.496-0.408-0.984-0.6-1.48-0.584-1.672-1.304-3.279999-1.983999-4.911999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.68-1.312-3.287999-1.992-4.928-0.576-1.656-1.296-3.255999-1.967999-4.879999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.592-1.672-1.312-3.271999-1.983999-4.904-0.592-1.68-1.312-3.295999-2-4.935999-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.279999-1.984-4.903999C757.375882 237.583963 717.967888 207.999968 675.999894 207.999968h-327.999948c-2.688 0-5.359999 0.16-8.015999 0.399999-0.936 0.088-1.864 0.208-2.8 0.32a108.607983 108.607983 0 0 0-8.367998 1.384c-1.6 0.344-3.192 0.76-4.784 1.176-1.008 0.264-2.016 0.504-3.007999 0.8l-0.064 0.016v0.008c-36.647994 11.111998-66.81599 43.615993-72.375989 81.919987l-56.527991 367.567943A87.495986 87.495986 0 0 0 187.991971 687.999893v39.999993c0 12.751998 2.792 24.839996 7.687998 35.799995 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.279999 1.975999 4.879999 0.624 1.656 1.264 3.303999 1.984 4.904 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.991999 4.935999 0.624 1.648 1.256 3.279999 1.976 4.872 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.656 1.264 3.303999 1.983999 4.911999 0.632 1.688 1.288 3.367999 2.032 5.007999 0.608 1.624 1.24 3.231999 1.944 4.815999 0.624 1.656 1.264 3.303999 1.983999 4.912 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.271999 1.975999 4.871999 0.624 1.656 1.264 3.303999 1.984 4.912 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.927999 0.624 1.648 1.256 3.279999 1.975999 4.879999 0.624 1.656 1.264 3.303999 1.984 4.912 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.656 1.264 3.303999 1.983999 4.903999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.279999 1.976 4.879999 0.624 1.656 1.264 3.303999 1.983999 4.912 0.624 1.648 1.264 3.303999 1.984 4.903999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.279999 1.975999 4.879999 0.624 1.656 1.264 3.303999 1.984 4.904 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.279999 1.975999 4.879999 0.624 1.656 1.264 3.303999 1.984 4.904 0.624 1.656 1.264 3.303999 1.984 4.911999 0.632 1.68 1.28 3.351999 2.015999 4.983999 0.616 1.64 1.256 3.271999 1.968 4.863999 0.624 1.648 1.256 3.279999 1.976 4.872 0.624 1.656 1.264 3.303999 1.983999 4.911999 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.264 0.704 0.568 1.384 0.84 2.08A508.007921 508.007921 0 0 0 511.99992 1023.99984c195.527969 0 365.407943-109.647983 451.647929-270.775958z" fill="#D16354" p-id="22469"></path><path d="M823.999871 719.999888H191.99997a7.991999 7.991999 0 0 1-6.047999-2.768C184.431971 715.487888 183.999971 703.99989 183.999971 687.999893l60.591991-393.975939C251.479961 246.591961 296.071954 207.999968 343.999946 207.999968h327.999949c47.927993 0 92.511986 38.591994 99.407984 86.023986L831.99987 687.999893c0 7.999999-0.44 27.487996-1.952 29.231995A7.991999 7.991999 0 0 1 823.999871 719.999888z" fill="#406A80" p-id="22470"></path><path d="M771.407879 294.023954C764.511881 246.591961 719.927888 207.999968 671.999895 207.999968h-23.999996c47.927993 0 92.511986 38.591994 99.407984 86.023986L807.999874 687.999893c0 7.999999-0.44 27.487996-1.952 29.231995A7.991999 7.991999 0 0 1 799.999875 719.999888h23.999996c2.32 0 4.527999-1.008 6.047999-2.768 1.512-1.744 1.952-21.231997 1.952-29.231995l-60.591991-393.975939z" fill="#325366" p-id="22471"></path><path d="M743.999884 815.999873H271.999958c-48.519992 0-87.999986-39.479994-87.999987-87.999987v-39.999993c0-48.519992 39.479994-87.999986 87.999987-87.999987h471.999926c48.511992 0 87.999986 39.479994 87.999986 87.999987v39.999993c0 48.519992-39.487994 87.999986-87.999986 87.999987z" fill="#325366" p-id="22472"></path><path d="M271.999958 799.999875c-39.703994 0-71.999989-32.295995-71.999989-71.999989v-39.999993c0-39.703994 32.295995-71.999989 71.999989-71.999989h471.999926c39.703994 0 71.999989 32.295995 71.999989 71.999989v39.999993c0 39.703994-32.295995 71.999989-71.999989 71.999989H271.999958z" fill="#406A80" p-id="22473"></path><path d="M690.671892 707.999889m-39.999994 0a39.999994 39.999994 0 1 0 79.999988 0 39.999994 39.999994 0 1 0-79.999988 0Z" fill="#F5F5F5" p-id="22474"></path><path d="M690.671892 707.999889m-23.999996 0a23.999996 23.999996 0 1 0 47.999992 0 23.999996 23.999996 0 1 0-47.999992 0Z" fill="#406A80" p-id="22475"></path><path d="M623.999903 509.33592A18.719997 18.719997 0 0 1 605.335905 527.999918H418.663935A18.719997 18.719997 0 0 1 399.999938 509.33592V322.66395A18.719997 18.719997 0 0 1 418.663935 303.999953h186.67197A18.719997 18.719997 0 0 1 623.999903 322.66395v186.67197z" fill="#E16B5A" p-id="22476"></path><path d="M431.111933 303.999953h161.775974v80.887987H431.111933z" fill="#F5F5F5" p-id="22477"></path><path d="M536.887916 316.447951H567.999911v55.999991h-31.111995z" fill="#E16B5A" p-id="22478"></path><path d="M437.335932 434.663932h149.327976V527.999918H437.335932z" fill="#E6E6E6" p-id="22479"></path><path d="M561.783912 465.783927H462.223928a6.215999 6.215999 0 0 1 0-12.431998h99.559984a6.215999 6.215999 0 1 1 0 12.431998zM561.783912 496.887922H462.223928a6.215999 6.215999 0 0 1 0-12.439998h99.559984a6.215999 6.215999 0 0 1 0 12.439998z" fill="#CCCCCC" p-id="22480"></path></svg>'

    const handleSaveContent = async () => {
        const md = contentEditor.value.getValue();
        mdEditorForm.value.content = md
        editorStore.mdEditorForm = mdEditorForm.value
        editorStore.handleSaveContent()
    }

    const handlLoading =() => {
        loading.value = ElLoading.service({
            target: '#edit-warp',
            lock: true,
            text: '加载中。。。',
        })
    }

    const saveBtn = {
      hotkey: '⌘S',
      name: 'save-md',
      tipPosition: 's',
      tip: '保存笔记',
      className: 'save-btn',
      icon: saveSvg,
      click: handleSaveContent,
    }

    const toolbars = [
        saveBtn,
        "|",
        "emoji",
        "headings",
        "bold",
        "italic",
        "strike",
        "link",
        "|",
        "list",
        "ordered-list",
        "check",
        "outdent",
        "indent",
        "|",
        "quote",
        "line",
        "code",
        "inline-code",
        "insert-before",
        "insert-after",
        "|",
        "upload",
        "record",
        "table",
        "|",
        "undo",
        "redo",
        "|",
        // "fullscreen",
        "edit-mode",
        {
            name: "more",
            toolbar: [
                "both",
                "code-theme",
                "content-theme",
                "export",
                "outline",
                "preview",
                "devtools",
                "info",
                "help",
            ],
        },
    ]

    const initEditor = () => {
        contentEditor.value = new Vditor('contentVditor', {
            height: getEditorWinHeight(), // 'calc(100vh - 40px - 25px)', 
            width: "100%",
            lang: 'zh_CN',
            "mode": "ir",
            toolbarConfig: {
                pin: false,
            },
            "outline": {
                "enable": true,
                "position": "right"
            },
            cache: {
                enable: false,
            },
            toolbar: toolbars,
            input (md) {
                editorStore.hasSave = true
            },
            blur (md) {
                if(mdEditorForm.value !=null) {
                    mdEditorForm.value.content = md
                    editorStore.mdEditorForm = mdEditorForm.value
                }
            },
            upload: {
                accept: 'image/*,.mp3, .mp4, .rar, .zip',
                headers: {
                    "Authorization": 'Bearer ' + getToken(),
                    "clientid": import.meta.env.VITE_APP_CLIENT_ID
                },
                url: getServerUrl() + '/basics/base/file',
                linkToImgUrl: getServerUrl() + '/basics/base/file',
                filename (name) {
                    return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
                    replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
                    replace('/\\s/g', '')
                },
                linkToImgCallback(responseText: string) {
                    console.log(responseText, "linkToImgCallback====")
                },
                linkToImgFormat(responseText: string): string {
                    const resJson = JSON.parse(responseText)

                    const respJson = {
                        msg: resJson.msg,
                        code: 0,
                        data: {
                            originalURL: '',
                            url: resJson.data.url
                        }
                    }

                    return JSON.stringify(respJson)
                },
                format(files: File[], responseText: string): string {
                    const resJson = JSON.parse(responseText)

                    const respJson = {
                        msg: resJson.msg,
                        code: 0,
                        data: {
                            errFiles: [],
                            succMap: {
                                [files[0].name]: resJson.data.url
                            }
                        }
                    }

                    return JSON.stringify(respJson)
                },
                error(msg: string) {
                    ElMessage.error(msg)
                }
            },
            after () {
                notesInfo(route.params.id as string)
            },
            preview: {
                // 设置编辑器预览区域的最大宽度
                maxWidth: 1920
            }
        })
    }

    watch(
        () => route.params.id,
        (newId: string, oldId: string) => {
            notesInfo(newId as string)
        }
    )

    const notesInfo = async (id: string) => {
        handlLoading()
        let res = await getNotes(id)
        mdEditorForm.value = res.data
        let content =  ""
        if(res.data != null && res.data.content != null) {
            content = res.data.content
        }
        contentEditor.value.setValue(content)
        loading.value.close()
    }

    onMounted(() => {
        initEditor()
        // setTimeout(()=> {
        //     notesInfo(route.params.id as string)
        // }, 500)
    })
</script>
<style lang="scss" scoped>
    .md-title {
        padding-left: 60px;
        padding-right: 20px;
    }
    :deep(.md-edotor-wrap) {
        margin-bottom: 0;
    }
    .md-editor {
        border: 0;
        border-radius: 0;
    }
    :deep(.save-btn .vditor-tooltipped) {
        padding: 7px 5px;
    }
    :deep(.save-btn .icon) {
        width: 20px;
        height: 20px;
    }
</style>